<template>
	<view class="page">
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack"  title="预约时间">
				<view slot="center" class="navTitle">
					预约时间 
				</view>
			</u-navbar>
		</view>
		
		<view class="flex1">
			<scroll-view scroll-y="true" class="scrollView pt30">
				<view class="expertList pd30" v-if="info">
					<view class="item">
						<view class="img">
							<image :src="info.image" mode="aspectFill"></image>
						</view>
						<view class="in">
							<view class="tag" :class="info.type==0?'':'s2'">
								<text>{{info.tag}}</text>
								<view class="sd">
									<image src="@/static/images/roundl.png" mode="aspectFill"></image>
								</view>
							</view>
							<view class="im">
								<view class="il">
									<view class="it">
										<text class="n">{{info.name}}</text>
										<text>{{info.position}}</text>
									</view>
									<view class="ip">
										{{info.desc}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="pd30">
					<view class="icalendar" v-if="dataList">
						<view class="tit">
							选择预约时间
						</view>
						<view class="container">
							<view class="hd">
								<view class="td">
									<view class="em">
										排班
									</view>
								</view>
								<view class="td">
									<view class="em">
										早
									</view>
								</view>
								<view class="td">
									<view class="em">
										中
									</view>
								</view>
								<view class="td">
									<view class="em">
										晚
									</view>
								</view>
							</view>
							<view class="bd">
								<swiper :indicator-dots="false" :autoplay="false"  :duration="400" @change="swiperChange">
									<swiper-item v-for="(i,index1) in dataList" :key="index1">
										<view class="tds">
											<view class="tr" v-for="(td,index2) in i" :key="index2">
												<view class="td th">
													<view>
														{{td.date|tdDateFormate('week')}}
													</view>
													<view>
														{{td.date|tdDateFormate('MM-DD')}}
													</view>
												</view>
												<view class="td" :class="''+tdStaus(td.nums[0])+' '+(seletedDate==(index1+'_'+index2+'_'+1)?'selected':'')">
													<view class="i1">
														约满
													</view>
													<view class="i2" @tap="selectDate(td.date,td.nums,0,(index1+'_'+index2+'_'+1))">
														预约
													</view>
												</view>
												<view class="td" :class="''+tdStaus(td.nums[1])+' '+(seletedDate==(index1+'_'+index2+'_'+2)?'selected':'')">
													<view class="i1">
														约满
													</view>
													<view class="i2" @tap="selectDate(td.date,td.nums,1,(index1+'_'+index2+'_'+2))">
														预约
													</view>
												</view>
												<view class="td" :class="''+tdStaus(td.nums[2])+' '+(seletedDate==(index1+'_'+index2+'_'+3)?'selected':'')">
													<view class="i1">
														约满
													</view>
													<view class="i2" @tap="selectDate(td.date,td.nums,2,(index1+'_'+index2+'_'+3))">
														预约
													</view>
												</view>
											</view>
										</view>
									</swiper-item>
								</swiper>
							</view>
						</view>
						<view class="swiperDots">
							<view class="dt"  v-for="(i,index) in dataList" :key="index" :class="current==index?'on':''"></view>
						</view>
					</view>
					<view class="timeSelecter" v-if="selectedDates.length>0">
						<view class="tit">
							<view class="ico">
								<image src="@/static/images/icon-calendar.svg" mode="aspectFit"></image>
							</view>
							<view class="t">
								<text>{{form.date|dateFormate}}</text>
								<text>{{form.date|dateFormate('week')}}</text>
							</view>
						</view>
						<view class="timeList">
							<view class="i" v-for="i in selectedDates" :class="''+timeStatus(i)" @tap="selectTime(i)">
								<view class="tm">
									{{i.time}}
								</view>
								<view class="stu">
									<text class="s1">不可预约</text>
									<text class="s2">可预约</text>
									<text class="s3">约满</text>
								</view>
							</view>
						</view>
					</view>
					<view class="tabContentBox" v-if="info.contents">
						<view class="tbs">
							<view class="tb" v-for="(i,index) in info.contents" @tap="changeTab(index)" :class="tabIndex==index?'active':''">{{i.title}}</view>
						</view>
						<view class="con">
							<view class="p" v-html="info.contents[tabIndex].content"></view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:0,
				tabIndex:0,
				seletedDate:'',
				seletedTime:'',
				info:{},
				form:{
					expertId:101,
					date:'',
					time:'',
				},
				dataList:[],
				selectedDates:[]
			}
		},
		methods: { 
			changeTab(index){
				this.tabIndex=index;
			},
			swiperChange(e){
				this.current=e.detail.current;
			},
			timeStatus(i){
				var that=this;
				var res='';
				if(i.disabled){
					res='disabled'
				}else if(i.isAppoint){
					res='full'
				};
				if(that.seletedTime==(that.form.date+i.time)){
					res+=' '+'selected'
				};
				return res;
			},
			tdStaus(arr) {
				if(!arr||arr.length==0){
					return 'disabled'
				}else{
					let all=arr.length;//总量
					let a=0;//不可预约量
					let b=0;//可预约量
					arr.forEach(i=>{
						if (i.disabled) {
							a++;
						}else{
							if(!i.isAppoint){
								b++;
							};
						}
					});
					if(a==all){
						return 'disabled'
					}else if(b>0){
						return ''
					}else{
						return 'full'
					};
				};
				
			},
			selectDate(date,arr,index,selectedIndex){
				var that=this;
				that.seletedDate=selectedIndex;
				that.form.date=date;
				that.form.time='';
				that.seletedTime='';
				that.selectedDates=arr[index];
			},
			selectTime(i){
				var that=this;
				if(i.total==0||i.num==i.total){return};
				that.seletedTime=that.form.date+i.time;
				that.form.time=i.time;
				that.stepNext();
			},
			stepNext(){//设置缓存并跳转到确认页面
				var that=this;
				uni.setStorage({
					key:'appointFormData',
					data:JSON.stringify(that.form),
					success() {
						uni.navigateTo({
							url:'/subpage/appointment/check'
						})
					}
				})
			},
			initDataList:function(){
				var that=this;
				var res=[];
				var cols=7;
				var list=that.info.dates;
				if(list){
					var nums=Math.ceil(list.length/cols);
					for(var i=0;i<nums;i++){
						var colArr=[];
						for(var j=0;j<cols;j++){
							if(list[i*cols+j]){
								colArr.push(list[i*cols+j]);
							}
						};
						res.push(colArr);
					}
				};
				that.dataList=res;
			},
			getInfo(){
				var that=this;
				var res={
					id:101,
					name:"李浩楠",
					type:0,
					position:'心理专职教师',
					image:'../../static/upload/exp1.png',
					desc:'学校专职心理辅导老师，帮助学生解决问题',
					tag:'校内心理辅导专职教师',
					location:'综合楼三楼301室(心理咨询室)',
					contents:[
						{
							title:'教师简介',
							content:`行为问题不仅影响儿童的生长发育、心理健康和社会化过程，还会导致成人期发生社会适应不良、违法犯罪和精神疾病。这些问题产生的基础在儿童期，因此早期筛查及干预特别重要`
						},
						{
							title:'其他标签',
							content:`其他标签内容`
						},
						{
							title:'其他标签',
							content:`其他标签内容`
						}
					],
					dates:[
						{
							date:'2024-09-07',
							nums:[]
						},
						{
							date:'2024-09-08',
							nums:[]
						},
						{
							date:'2024-09-09',
							nums:[
								[{time:'08:00-09:00',disabled:false,isAppoint:false},{time:'09:00-10:00',disabled:false,isAppoint:true},{time:'10:00-11:00',disabled:false,isAppoint:false},{time:'11:00-12:00',disabled:false,isAppoint:false}],
								[{time:'13:00-14:00',disabled:true,isAppoint:false},{time:'14:00-15:00',disabled:false,isAppoint:true},{time:'15:00-16:00',disabled:false,isAppoint:true},{time:'16:00-17:00',disabled:false,isAppoint:true},{time:'17:00-18:00',disabled:false,isAppoint:true}],
								[{time:'18:00-19:00',disabled:false,isAppoint:true},{time:'19:00-20:00',disabled:false,isAppoint:false}]
							]
						},
						{
							date:'2024-09-10',
							nums:[
								[{time:'08:00-09:00',disabled:false,isAppoint:true},{time:'09:00-10:00',disabled:false,isAppoint:true},{time:'10:00-11:00',disabled:false,isAppoint:true},{time:'11:00-12:00',disabled:false,isAppoint:true}],
								[{time:'13:00-14:00',disabled:true,isAppoint:false},{time:'14:00-15:00',disabled:false,isAppoint:false},{time:'15:00-16:00',disabled:false,isAppoint:true},{time:'16:00-17:00',disabled:false,isAppoint:true},{time:'17:00-18:00',disabled:false,isAppoint:false}],
								[{time:'18:00-19:00',disabled:false,isAppoint:true},{time:'19:00-20:00',disabled:false,isAppoint:false}]
							]
						},
						{
							date:'2024-09-11',
							nums:[
								[{time:'08:00-09:00',num:4,total:10},{time:'09:00-10:00',num:7,total:10},{time:'10:00-11:00',num:10,total:10},{time:'11:00-12:00',num:10,total:10}],
								[{time:'12:00-13:00',num:10,total:10},{time:'13:00-14:00',num:10,total:10},{time:'14:00-15:00',num:10,total:10},{time:'15:00-16:00',num:10,total:10},{time:'16:00-17:00',num:10,total:10},{time:'17:00-18:00',num:10,total:10}],
								[{time:'18:00-19:00',num:10,total:10},{time:'19:00-20:00',num:2,total:10}]
							]
						},
						{
							date:'2024-09-12',
							nums:[
								[{time:'08:00-09:00',disabled:false,isAppoint:true},{time:'09:00-10:00',disabled:false,isAppoint:true},{time:'10:00-11:00',disabled:false,isAppoint:false},{time:'11:00-12:00',disabled:false,isAppoint:false}],
								[{time:'13:00-14:00',disabled:true,isAppoint:false},{time:'14:00-15:00',disabled:false,isAppoint:true},{time:'15:00-16:00',disabled:false,isAppoint:true},{time:'16:00-17:00',disabled:false,isAppoint:true},{time:'17:00-18:00',disabled:false,isAppoint:false}],
								[{time:'18:00-19:00',disabled:false,isAppoint:true},{time:'19:00-20:00',disabled:false,isAppoint:false}]
							]
						},
						{
							date:'2024-09-13',
							nums:[
								[{time:'08:00-09:00',disabled:false,isAppoint:false},{time:'09:00-10:00',disabled:false,isAppoint:true},{time:'10:00-11:00',disabled:false,isAppoint:false},{time:'11:00-12:00',disabled:false,isAppoint:false}],
								[{time:'13:00-14:00',disabled:true,isAppoint:false},{time:'14:00-15:00',disabled:false,isAppoint:false},{time:'15:00-16:00',disabled:false,isAppoint:true},{time:'16:00-17:00',disabled:false,isAppoint:true},{time:'17:00-18:00',disabled:false,isAppoint:false}],
								[{time:'18:00-19:00',disabled:true,isAppoint:false},{time:'19:00-20:00',disabled:true,isAppoint:false}]
							]
						},
						{
							date:'2024-09-14',
							nums:[]
						},
						{
							date:'2024-09-15',
							nums:[]
						},
						{
							date:'2024-09-16',
							nums:[
								[{time:'08:00-09:00',disabled:false,isAppoint:false},{time:'09:00-10:00',disabled:false,isAppoint:true},{time:'10:00-11:00',disabled:false,isAppoint:false},{time:'11:00-12:00',disabled:false,isAppoint:false}],
								[{time:'13:00-14:00',disabled:true,isAppoint:false},{time:'14:00-15:00',disabled:false,isAppoint:false},{time:'15:00-16:00',disabled:false,isAppoint:true},{time:'16:00-17:00',disabled:false,isAppoint:true},{time:'17:00-18:00',disabled:false,isAppoint:false}],
								[{time:'18:00-19:00',disabled:false,isAppoint:true},{time:'19:00-20:00',disabled:false,isAppoint:false}]
							]
						},
						{
							date:'2024-09-17',
							nums:[
								[{time:'08:00-09:00',disabled:false,isAppoint:false},{time:'09:00-10:00',disabled:false,isAppoint:true},{time:'10:00-11:00',disabled:false,isAppoint:false},{time:'11:00-12:00',disabled:false,isAppoint:false}],
								[{time:'13:00-14:00',disabled:true,isAppoint:false},{time:'14:00-15:00',disabled:false,isAppoint:false},{time:'15:00-16:00',disabled:false,isAppoint:true},{time:'16:00-17:00',disabled:false,isAppoint:true},{time:'17:00-18:00',disabled:false,isAppoint:false}],
								[{time:'18:00-19:00',disabled:false,isAppoint:true},{time:'19:00-20:00',disabled:false,isAppoint:false}]
							]
						},
						{
							date:'2024-09-18',
							nums:[
								[{time:'08:00-09:00',disabled:false,isAppoint:false},{time:'09:00-10:00',disabled:false,isAppoint:true},{time:'10:00-11:00',disabled:false,isAppoint:false},{time:'11:00-12:00',disabled:false,isAppoint:false}],
								[{time:'13:00-14:00',disabled:true,isAppoint:false},{time:'14:00-15:00',disabled:false,isAppoint:false},{time:'15:00-16:00',disabled:false,isAppoint:true},{time:'16:00-17:00',disabled:false,isAppoint:true},{time:'17:00-18:00',disabled:false,isAppoint:false}],
								[{time:'18:00-19:00',disabled:false,isAppoint:true},{time:'19:00-20:00',disabled:false,isAppoint:false}]
							]
						},
						{
							date:'2024-09-19',
							nums:[
								[{time:'08:00-09:00',disabled:false,isAppoint:false},{time:'09:00-10:00',disabled:false,isAppoint:true},{time:'10:00-11:00',disabled:false,isAppoint:false},{time:'11:00-12:00',disabled:false,isAppoint:false}],
								[{time:'13:00-14:00',disabled:true,isAppoint:false},{time:'14:00-15:00',disabled:false,isAppoint:false},{time:'15:00-16:00',disabled:false,isAppoint:true},{time:'16:00-17:00',disabled:false,isAppoint:true},{time:'17:00-18:00',disabled:false,isAppoint:false}],
								[{time:'18:00-19:00',disabled:false,isAppoint:true},{time:'19:00-20:00',disabled:false,isAppoint:false}]
							]
						},
						{
							date:'2024-09-20',
							nums:[
								[{time:'08:00-09:00',disabled:false,isAppoint:false},{time:'09:00-10:00',disabled:false,isAppoint:true},{time:'10:00-11:00',disabled:false,isAppoint:false},{time:'11:00-12:00',disabled:false,isAppoint:false}],
								[{time:'13:00-14:00',disabled:true,isAppoint:false},{time:'14:00-15:00',disabled:false,isAppoint:false},{time:'15:00-16:00',disabled:false,isAppoint:true},{time:'16:00-17:00',disabled:false,isAppoint:true},{time:'17:00-18:00',disabled:false,isAppoint:false}],
								[{time:'18:00-19:00',disabled:false,isAppoint:true},{time:'19:00-20:00',disabled:false,isAppoint:false}]
							]
						},
						{
							date:'2024-09-21',
							nums:[]
						},
						{
							date:'2024-09-22',
							nums:[]
						},
						{
							date:'2024-09-23',
							nums:[
								[{time:'08:00-09:00',disabled:false,isAppoint:false},{time:'09:00-10:00',disabled:false,isAppoint:true},{time:'10:00-11:00',disabled:false,isAppoint:false},{time:'11:00-12:00',disabled:false,isAppoint:false}],
								[{time:'13:00-14:00',disabled:true,isAppoint:false},{time:'14:00-15:00',disabled:false,isAppoint:false},{time:'15:00-16:00',disabled:false,isAppoint:true},{time:'16:00-17:00',disabled:false,isAppoint:true},{time:'17:00-18:00',disabled:false,isAppoint:false}],
								[{time:'18:00-19:00',disabled:false,isAppoint:true},{time:'19:00-20:00',disabled:false,isAppoint:false}]
							]
						},
						{
							date:'2024-09-24',
							nums:[
								[{time:'08:00-09:00',disabled:false,isAppoint:false},{time:'09:00-10:00',disabled:false,isAppoint:true},{time:'10:00-11:00',disabled:false,isAppoint:false},{time:'11:00-12:00',disabled:false,isAppoint:false}],
								[{time:'13:00-14:00',disabled:true,isAppoint:false},{time:'14:00-15:00',disabled:false,isAppoint:false},{time:'15:00-16:00',disabled:false,isAppoint:true},{time:'16:00-17:00',disabled:false,isAppoint:true},{time:'17:00-18:00',disabled:false,isAppoint:false}],
								[{time:'18:00-19:00',disabled:false,isAppoint:true},{time:'19:00-20:00',disabled:false,isAppoint:false}]
							]
						},
						{
							date:'2024-09-25',
							nums:[
								[{time:'08:00-09:00',disabled:false,isAppoint:false},{time:'09:00-10:00',disabled:false,isAppoint:true},{time:'10:00-11:00',disabled:false,isAppoint:false},{time:'11:00-12:00',disabled:false,isAppoint:false}],
								[{time:'13:00-14:00',disabled:true,isAppoint:false},{time:'14:00-15:00',disabled:false,isAppoint:false},{time:'15:00-16:00',disabled:false,isAppoint:true},{time:'16:00-17:00',disabled:false,isAppoint:true},{time:'17:00-18:00',disabled:false,isAppoint:false}],
								[{time:'18:00-19:00',disabled:false,isAppoint:true},{time:'19:00-20:00',disabled:false,isAppoint:false}]
							]
						},
						{
							date:'2024-09-26',
							nums:[
								[{time:'08:00-09:00',disabled:false,isAppoint:false},{time:'09:00-10:00',disabled:false,isAppoint:true},{time:'10:00-11:00',disabled:false,isAppoint:false},{time:'11:00-12:00',disabled:false,isAppoint:false}],
								[{time:'13:00-14:00',disabled:true,isAppoint:false},{time:'14:00-15:00',disabled:false,isAppoint:false},{time:'15:00-16:00',disabled:false,isAppoint:true},{time:'16:00-17:00',disabled:false,isAppoint:true},{time:'17:00-18:00',disabled:false,isAppoint:false}],
								[{time:'18:00-19:00',disabled:false,isAppoint:true},{time:'19:00-20:00',disabled:false,isAppoint:false}]
							]
						},
						{
							date:'2024-09-27',
							nums:[
								[{time:'08:00-09:00',disabled:false,isAppoint:false},{time:'09:00-10:00',disabled:false,isAppoint:true},{time:'10:00-11:00',disabled:false,isAppoint:false},{time:'11:00-12:00',disabled:false,isAppoint:false}],
								[{time:'13:00-14:00',disabled:true,isAppoint:false},{time:'14:00-15:00',disabled:false,isAppoint:false},{time:'15:00-16:00',disabled:false,isAppoint:true},{time:'16:00-17:00',disabled:false,isAppoint:true},{time:'17:00-18:00',disabled:false,isAppoint:false}],
								[{time:'18:00-19:00',disabled:false,isAppoint:true},{time:'19:00-20:00',disabled:false,isAppoint:false}]
							]
						}
					]
				};
				that.info=res;
				that.initDataList();
			}
		},
		computed:{
			
		},
		mounted(){
			//清除表单缓存
			uni.removeStorage({
				key:'appointFormData'
			});
			this.getInfo();
		}
	}
</script>

<style lang="scss" scoped>
	.expertList{
		margin-bottom: 10rpx;
	}
</style>
